<template>
  <div>
    <a-card title="商品查询">
      <a-form :model="queryParams" layout="inline">
        <a-form-item label="名称">
          <a-input v-model:value="queryParams.name" />
        </a-form-item>
        <a-form-item label="分类">
          <category-selection ref="csRef" @categorySelected="doCategorySelected" />
        </a-form-item>
        <a-form-item label="品牌">
          <brand-selection ref="bsRef" @brandSelected="doBrandSelected" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="queryParams.enabled" style="width: 80px">
            <a-select-option value="true">启用</a-select-option>
            <a-select-option value="false">停用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="query">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="reset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-divider style="border-color: #7cb305" dashed />
    <a-card title="查询结果">
      <a-table
        :columns="columns"
        :data-source="productDataSet"
        rowKey="uid"
        :pagination="paginationConfig"
      >
        <template #action="{ record }">
          <a-button style="margin-right: 10px" @click="edit(record.uid)">修改</a-button>
          <a-button v-if="record.enabled" danger @click="disable(record.uid)">停用</a-button>
          <a-button v-if="!record.enabled" type="primary" @click="enable(record.uid)"
            >启用
          </a-button>
        </template>
        <template #enabled="{ record }">
          <span v-if="record.enabled">启用</span>
          <span v-else>停用</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CategorySelection from '@/components/chunfeng/category/CategorySelection.vue'
import BrandSelection from '@/components/chunfeng/brand/BrandSelection.vue'

import { useProductQueryFunctions } from '@/views/product/list/functions'

export default defineComponent({
  name: 'ProductList',
  components: { BrandSelection, CategorySelection },

  setup() {
    const {
      productDataSet,
      paginationConfig,
      queryParams,
      columns,
      enable,
      disable,
      query,
      reset,
      edit,
      csRef,
      bsRef,
      doCategorySelected,
      doBrandSelected,
    } = useProductQueryFunctions()

    return {
      queryParams,
      columns,
      enable,
      disable,
      query,
      productDataSet,
      paginationConfig,
      edit,
      reset,
      doCategorySelected,
      doBrandSelected,
      csRef,
      bsRef,
    }
  },
})
</script>
